<template>
  <el-card class="mt-20 mr-20" shadow="never">
    <el-form :disabled="permissionDisabled()" ref="formRef" :rules="rules" :model="form" label-width="200px" label-position="left">
      <el-form-item :label="$t('pageStr.enableMacFireWallStr')">
        <el-switch v-model="form.enabled" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <div v-if="form.enabled === '1'">
        <el-form-item :label="$t('pageStr.macFireWallModeStr')" style="max-width: 500px">
          <el-select v-model="form.mode" clearable class="w-full">
            <el-option :label="$t('pageStr.whitelistStr')" value="1"/>
            <el-option :label="$t('pageStr.blacklistStr')" value="2"/>
          </el-select>
        </el-form-item>
        <el-table :data="form.macData" :header-cell-style="tableHeadStyle">
          <el-table-column :label="$t('pageStr.macStr')" align="center" width="500">
            <template #default="{row}">
              <el-input v-model="row.macAddr" style="width: 95%" clearable/>
            </template>
          </el-table-column>
          <el-table-column :label="$t('pageStr.remarkStr')" align="center" width="500">
            <template #default="{row}">
              <el-input v-model="row.remark" clearable/>
            </template>
          </el-table-column>
          <el-table-column v-if="!permissionDisabled()" width="80" align="center">
            <template #default="scope">
              <img v-if="form.macData.length > 1" @click="handleRemoveRow(scope.$index)"
                   src="@/assets/icon/remove.png" class="removeIcon pointer">
              <img v-if="form.macData.length < 4" @click="handleAddRow(scope.$index)" src="@/assets/icon/add.png"
                   class="removeIcon pointer">
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </el-card>
  <el-button v-permissionShow style="margin-top: 20px;width: 110px;color: #fff" color="#C29B74" @click="handleSubmit">
    {{ $t('tabsStr.applyStr') }}
  </el-button>
</template>

<script setup>
import {ref, onBeforeMount} from 'vue'
import {reqGetMacWall, reqSetMacWall} from '@/api/application/mac-fire-set'
import {ElMessage} from "element-plus";
import {useI18n} from 'vue-i18n'
import {permissionDisabled} from '@/utils'

const {t} = useI18n()
const formRef = ref(null)
const rules = {}
const form = ref({
  enabled: '',
  mode: '',
  macData: [{}]
})
// table表头的样式
const tableHeadStyle = {
  'text-align': 'center',
  'background-color': '#F5EFE9',
  'max-width': '1000px',
  'color': '#161940'
}

onBeforeMount(getData)

function getData() {
  reqGetMacWall().then((res) => {
    form.value.enabled = res.macFireWall.enabled
    form.value.mode = res.macFireWall.mode
    // 遍历mac数组
    form.value.macData = res.macFireWall.mac.map((item, index) => {
      return {macAddr: item, remark: res.macFireWall.remark[index]}
    })
    console.log('mac过滤读取', form.value)
  })
}

function handleRemoveRow(index) {
  console.log('移除', index)
  form.value.macData.splice(index, 1)
}

function handleAddRow(index) {
  if (form.value.macData.length < 4) {
    // 在数组指定下标插入指定元素
    form.value.macData.splice(index + 1, 0, {})
  }
}

function handleSubmit() {
  formRef.value.validate((valid) => {
    if (!valid) {
      return
    }
    const submitForm = {
      enabled: form.value.enabled,
      mode: form.value.mode,
      num: form.value.macData.length
    }
    let i = 0
    form.value.macData.forEach((item) => {
      submitForm['mac' + i] = item.macAddr
      submitForm['remark' + i] = item.remark
      i++
    })
    console.log('设置mac地址过滤', submitForm)
    reqSetMacWall(submitForm).then(() => {
      ElMessage.success(t('successTip'))
    }).catch(() => {
      ElMessage.error(t('errorTip'))
    })
  })
}
</script>

<style scoped>
.addBtn {
  margin-top: 10px;
  width: 1050px;
}

.removeIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
</style>